---
name: Options
menu: Usage
route: /usage/options
---

import { Playground } from 'docz';

import ReactWordcloud from '../react-wordcloud';
import words from '../words';

# Options

You can customize many visual and layout properties of `react-wordcloud` by using the [`options`](../props#options) prop.

## Colors

`react-wordcloud` will randomnly apply colors from an array of color hex codes.

<Playground>
  <ReactWordcloud
    options={{
      colors: ['#1f77b4', '#9467bd', '#8c564b'],
    }}
    words={words}
  />
</Playground>

## Deterministic Behaviour

`react-wordcloud` randomly positions and rotates words by default. If `options.deterministic` is `true`, `react-wordcloud` will produce the same positioning/rotation/color for a provided input. You can also provide a `randomSeed` string value to control the random seed behavior.  Try resizing the wordcloud up and down in the example below to see the deterministic behavior.

<Playground>
  <ReactWordcloud
    options={{
      deterministic: true,
      randomSeed: 'seed1',
    }}
    words={words}
  />
</Playground>

## Font Styles

Configure word font styles using the `fontFamily`, `fontSizes`, `fontStyle`, `fontWeight` options.

<Playground>
  <ReactWordcloud
    options={{
      fontFamily: 'courier new',
      fontSizes: [10, 20],
      fontStyle: 'italic',
      fontWeight: 'bold',
    }}
    words={words}
  />
</Playground>

## Rotations

By default `react-wordcloud` will apply random rotations if the `rotations` option is not specified. If `rotations` option is specified, it will use evenly-divided angles from the `rotationAngles` option based on the `rotations` value. The following example demonstrates common rotation angles of wordcloud layouts

<Playground>
  <h3>Auto</h3>
  <ReactWordcloud
    size={[600, 400]}
    words={words}
  />
  <h3>0º</h3>
  <ReactWordcloud
    options={{
      rotations: 1,
      rotationAngles: [0, 0],
    }}
    size={[600, 400]}
    words={words}
  />
  <h3>0º, 90º (negative angles work too)</h3>
  <ReactWordcloud
    options={{
      rotations: 2,
      rotationAngles: [-90, 0],
    }}
    size={[600, 400]}
    words={words}
  />
  <h3>0º, 45º, 90º</h3>
  <ReactWordcloud
    options={{
      rotations: 3,
      rotationAngles: [0, 90],
    }}
    size={[600, 400]}
    words={words}
  />
</Playground>

## Layout

Configure the wordcloud layout by using the `scale`, `spiral` options.

<Playground>
  <ReactWordcloud
    options={{
      scale: 'log',
      spiral: 'rectangular',
    }}
    words={words}
  />
</Playground>

## Attributes

You can set custom attributes on the `svg` or `text` nodes by using the `svgAttributes` or `textAttributes`.  You can either use a string or a function returning a string from a `Word` as values for attributes.  You may also override the existing attributes that are set by the wordcloud algorithm.  These features are demonstrated in the example below.

<Playground>
  <ReactWordcloud
    options={{
      svgAttributes: {
        role: 'list',
      },
      textAttributes: {
        'aria-label': word => `Word: '${word.text}', Count: '${word.value}'`,
        fill: 'red',
        role: 'img',
      },
    }}
    words={words}
  />
</Playground>

## Interactive

Use the Playground to edit and play around with some of these options!

<Playground>
  <ReactWordcloud
    words={words}
    options={{
      colors: [
        '#1f77b4',
        '#ff7f0e',
        '#2ca02c',
        '#d62728',
        '#9467bd',
        '#8c564b',
      ],
      deterministic: false,
      enableTooltip: true,
      fontFamily: 'impact',
      fontSizes: [5, 60],
      fontStyle: 'normal',
      fontWeight: 'normal',
      padding: 1,
      randomSeed: null,
      rotations: 3,
      rotationAngles: [0, 90],
      scale: 'sqrt',
      spiral: 'archimedean',
      svgAttributes: {
        role: 'list',
      },
      textAttributes: {
        'aria-label': word => `Word: '${word.text}', Count: '${word.value}'`,
        role: 'img',
      },
      tooltipOptions: {
        allowHTML: true,
        arrow: false,
        placement: 'bottom',
      },
      transitionDuration: 1000,
    }}
  />
</Playground>
